<template>
<div>
  <h2>物流相关信息</h2>
  <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <div class="logistics-status blue" :class="{
            'red': this.AddressInfo.logisticsStatus === 0,
            'pink': this.AddressInfo.logisticsStatus === 1,
            'blue': this.AddressInfo.logisticsStatus === 2,
            'green': this.AddressInfo.logisticsStatus === 3
          }">{{Deliver()}}</div>
          <div class="logistics-company">{{this.AddressInfo.logisticsCompany}}</div>
          <div class="logistics-no">{{this.AddressInfo.logisticsNo}}</div>
        </div>
      </div>
      <ul class="logistics-info-list">
        <li v-for="(item,index) in this.AddressInfo.logisticsInfo" :key="index">
          <div class="logistics-info-list-time">{{item.time}}</div>
          <div class="logistics-info-list-content">{{item.content}}</div>
        </li>
      </ul>
      {{this.AddressInfo.role}}
      <button v-token  @click="go">查看物流详情</button>
</div>

</template>

<script>


export default {

  directives: {
    'token': {
      inserted(el) { 
        console.log(el)
          if (this.isShow) { 
            el.style.pointerEvents = 'none'; // 禁用点击事件
            el.style.opacity = 0.5; // 降低透明度，表示不可点击
          }
      },
      update(el) { 
        if (this.isShow) { 
            el.style.pointerEvents = 'none'; // 禁用点击事件
            el.style.opacity = 0.5; // 降低透明度，表示不可点击
          }
      }
    }
  },  
  data() {
    return {
      isShow:false
    }
  },

  props: ['AddressInfo'],

  methods: {
    Deliver() { 
      if ( this.AddressInfo.logisticsStatus===0) { 
        return '未发货'
      }else if (this.AddressInfo.logisticsStatus===1) { 
        return '已发货'
      }else if (this.AddressInfo.logisticsStatus===2) { 
        return '已签收'
      }else if (this.AddressInfo.logisticsStatus===3) { 
        return '未签收'
      }
    },
    go() { 
      this.isShow = this.AddressInfo.role === 'admin' || 'zhangsan' || 'lisi'
      alert('看一看')
    }
  }

}

</script>

<style>
.red{
  color: red;
}
.pink{
  color:pink
}
.blue{
  color: blue;
}
.green{
  color: green;
}
</style>